<template>
  <div>
    <div>专题</div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">

      <van-cell v-for="item in list" :key="item.id">
        <img :src="item.scene_pic_url" alt="" class="topic-img" @click="godetail(item.id)">
        <p>{{item.title}}</p>
        <p>{{item.subtitle}}</p>
        <p>{{item.price_info}}起</p>
      </van-cell>
    </van-list>
    <div style="width:100px;height:100px"></div>
  </div>
</template>

<script>
import { topic } from "@/axios/index";
export default {
  name: "topicPage",

  data() {
    return {
        list: [],
        loading: false,
        finished: false,
        start:0
    };
  },

  mounted() {
    // this.onLoad();
  },

  methods: {
    async onLoad(){
        this.start++
        let res= await topic({page:this.start})
        console.log(res)    
        this.list.push(...res.data);
        console.log(this.start);
        this.loading = false;     
        if(this.start >= res.total){
            this.finished = true;
        }  
    },
    godetail(id){
        this.$router.push({name:'topicDetail',params:{'id':id}})
    }
  },
};
</script>

<style scoped lang="scss">
.topic-img{
    width: 710px;
    height: 343px;
}
</style>